<template>
  <section class="card-foot">
      <span class="page-btn prev-btn" :class="{'opacity': currentPage == 1}" @click="getCurrentPage('prev')"><img src="./page-icon.jpg" />上一页</span>
      <span class="page-num-txt "> <em>{{ currentPage }}</em> <font class="opacity">/ {{ totalPage }}</font> </span>
      <span class="page-btn next-btn" :class="{'opacity': currentPage == totalPage}" @click="getCurrentPage('next')"><img src="./page-icon.jpg" />下一页</span>
  </section>
</template>

<script>
export default {
  name:'card-foot',
  props: ['currentPage','totalPage'],
  data(){
    return {

    }
  },
  created(){
 
  },  
  methods:{ 
    getCurrentPage(status){
      if(status === 'prev'){
        this.$emit('getCurrentPage',this.currentPage-1,'prev')
      }else{
        this.$emit('getCurrentPage',this.currentPage+1,'next')
      }
    }
  },
  computed:{

  }
}
</script>

<style scoped lang="scss">
  .card-foot{
    width:100%;height:66px;line-height:66px;text-align: center;font-size:18px;color:#fff;background-color:#c9242b;position:relative;font-size:18px;
    /* 上下翻页 */
    .page-btn{
        position:absolute;width:95px;text-align:right;cursor:pointer;
        img{ width:30px;height:30px; position: absolute; left:0px; top:18px;}
    }
    .prev-btn{ 
        left:16px; 
        img{ transform:rotate3d(0,0,1,180deg); }
    }
    .next-btn{ 
        right:16px; 
    }
    /* 页码展示 */
    .page-num-txt {
        em{ opacity:1;font-style:normal; }
    }
    .opacity{opacity: .6;}
  }
</style>